{extend name="apps/common/view/front.tpl" /}
<!--meta-->
{block name="header_meta"}
<title>DaiCuo表格生成实例－{:config('common.site_name')}</title>
<meta name="keywords" content="DaiCuo表格排序,DaiCuo表格加载" />
<meta name="description" content="呆错后台管理框架表格组件的生成、排序、数据加载演示与开发实例。"  />
{/block}
<!--header-->
{block name="header"}
  {include file="apps/common/view/widget/header.tpl" /}
{/block}
<!--main-->
{block name="main"}
<div class="container pt-2">
  <form class="mb-3" action="{:DcUrl('example/sort/json')}" method="post" data-toggle="form">
    <div class="form-row collapse" id="filter-row">
      {:DcFormFilter(DcFormItems($fields))}
    </div>
    <input type="hidden" name="_method" value="delete">
    <div class="toolbar d-flex justify-content-between d-md-block" id="toolbar">
      <a class="btn btn-sm btn-danger" href="{:DcUrl('example/table/create')}" data-toggle="create" data-modal-xl="0">
        <i class="fa fa-fw fa-plus"></i> {:lang('create')}
      </a>
      <a class="btn btn-sm btn-dark" href="#filter-row" data-toggle="collapse">
        <i class="fa fa-fw fa-filter"></i> {:lang('filter')}
      </a>
      <a class="btn btn-sm btn-info" href="javascript:;" data-toggle="refresh" name="refresh">
        <i class="fa fa-fw fa-refresh"></i> {:lang('refresh')}
      </a>
    </div>
    {$table}
  </form>
  <div class="card mb-3">
    <div class="card-header d-flex justify-content-between">
      <font>控制器源码（apps/example/controller/Table.php）</font>
      <a class="font-weight-bold text-purple" href="javascript:;" data-toggle="copy" data-clipboard-target="#controller">复制</a>
    </div>
    <div class="card-body" id="controller">
      {:exampleCode('apps/example/controller/Table.php')}
    </div>
  </div>
  <div class="card mb-3">
    <div class="card-header d-flex justify-content-between">
      <font>模板源码（apps/example/theme/default/table/index.tpl）</font>
      <a class="font-weight-bold text-purple" href="javascript:;" data-toggle="copy" data-clipboard-target="#view">复制</a>
    </div>
    <div class="card-body" id="view">
      {:exampleCode('apps/example/theme/default/table/index.tpl')}
    </div>
  </div>
</div>
{/block}
<!--javascript-->
{block name="js"}
<script>
//表格单元格格式化回调函数实例
var operate = function(value, row, index, field){
    return '<i class="fa fa-fw fa-pencil mx-1" data-toggle="edit-test"></i><i class="fa fa-fw fa-trash-o mx-1 text-danger" data-toggle="delete-test"></i><i class="fa fa-fw fa-arrows-alt mx-1 text-purple dc-handle" data-toggle="sort"></i>';
};
//表格单元格事件监听实例
var events = {
    'click [data-toggle="edit-test"]': function (event, value, row, index) {
        alert(row.term_id);
    },
    'click [data-toggle="delete-test"]': function (event, value, row, index) {
        alert(row.term_name);
    },
};
//页面加载完毕后调用表格组件
$(function() {
    //呆错JS库(表格)初始化实例
    daicuo.table.init({
        selector: 'table[data-toggle="bootstrap-table"]',
        //表格插件加载成功后再动态加载呆错拖拽插件
        onSuccess: function(element){
            //监听刷新按钮
            $('[data-toggle="refresh"]').on("click", document.body, function() {
                daicuo.table.refresh(element);
            });
            //插拽排序插件
            daicuo.sortable.tableInit({
                selector  : 'table[data-toggle="bootstrap-table"]'
            });
        },
        //表格插件加载失败
        onFail:function(){
            daicuo.bootstrap.dialog('表格插件加载失败');
        }
    });
    //bootstrap-table插件原生事件监听实例
    $('table[data-toggle="bootstrap-table"]').on('dbl-click-row.bs.table',function(row, element, field) {
        daicuo.bootstrap.dialog('<p>row: 与单击的行对应的记录</p><p>element: tr元素，</p><p>field: 与单击的单元格对应的字段名称。</p>','表格行双击事件监听实例');
    });
});
</script>
{/block}
<!--footer-->
{block name="footer"}
  {include file="apps/common/view/widget/footer.tpl" /}
{/block}